<template>
	<page-meta :page-font-size="baseFontSize + 'rpx'" :root-font-size="baseFontSize + 'rpx'"></page-meta>
	<view class="pwd-retrieve-container">
		<uni-forms ref="form" :value="user" labelWidth="16rem">
			<uni-forms-item name="oldPassword" label="旧密码"><uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" /></uni-forms-item>
			<uni-forms-item name="newPassword" label="新密码"><uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" /></uni-forms-item>
			<uni-forms-item name="confirmPassword" label="确认密码"><uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" /></uni-forms-item>
			<button type="primary" @click="submit" style="background-color: #597ef7">提交</button>
		</uni-forms>
	</view>
</template>

<script>
import { updateUserPwd } from '@/api/system/user';

export default {
	data() {
		return {
			user: {
				oldPassword: undefined,
				newPassword: undefined,
				confirmPassword: undefined
			},
			rules: {
				oldPassword: {
					rules: [
						{
							required: true,
							errorMessage: '旧密码不能为空'
						}
					]
				},
				newPassword: {
					rules: [
						{
							required: true,
							errorMessage: '新密码不能为空'
						},
						{
							minLength: 6,
							maxLength: 20,
							errorMessage: '长度在 6 到 20 个字符'
						}
					]
				},
				confirmPassword: {
					rules: [
						{
							required: true,
							errorMessage: '确认密码不能为空'
						},
						{
							validateFunction: (rule, value, data) => data.newPassword === value,
							errorMessage: '两次输入的密码不一致'
						}
					]
				}
			}
		};
	},
	computed: {
		baseFontSize() {
			return this.$store.getters.fontSize;
		}
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		submit() {
			this.$refs.form.validate().then(res => {
				updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
					this.$modal.msgSuccess('修改成功');
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.pwd-retrieve-container {
	padding-top: 36rpx;
	padding: 15px;
}
</style>
